<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <script src="../wh2114/vuedemo/lib/vue-router.js"></script>
    <link rel="stylesheet" href="../wh2114/vuedemo/lib/animate.css" />
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <style>
      .box {
        width: 170px;

        background: darkcyan;
        padding: 30px;
      }
      table {
        border: 1px solid #000;
      }
      td {
        border: 1px solid #000;
        padding: 10px;
        text-align: center;
      }
      ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
      }
      li {
        width: 200px;
        background: pink;
      }

      .zoom-enter-active {
        animation: zoomInDown 0.9s;
      }

      .zoom-leave-active {
        animation: zoomOutDown 0.9s;
      }

      .box {
        width: 50%;
        min-height: 300px;
        border: 1px solid #999;
        border-radius: 10px;
      }
      .router-link-exact-active,
      .router-link-active {
        font-size: 30px;
        font-weight: bold;
        color: #f50;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <myhead></myhead>

      <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
      <router-view class="box"></router-view>

      <!-- 6 路由跳转 声明式 -->
    </div>

    <template id="main">
      <div>
        <h2>main - 微信的主路由</h2>
        <hr />
        <router-view></router-view>
        <hr />
        <myfoot></myfoot>
      </div>
    </template>

    <template id="wechat">
      <div>
        <h2>wechat - 微信-1</h2>
      </div>
    </template>
    <template id="contact">
      <div>
        <h2>contact - 通讯录-2</h2>
      </div>
    </template>
    <template id="find">
      <div>
        <h2>Find - 朋友圈</h2>
      </div>
    </template>
    <template id="mine">
      <div>
        <h2>mine - 个人中心</h2>
      </div>
    </template>
    <template id="notfound">
      <div>
        <h2>404 - 404 - NotFOund</h2>
      </div>
    </template>

    <template id="myfoot">
      <footer>
        <router-link v-for="(l,i) in flist" :key="i" :to="{name:l.name}">
          {{l.title}}
        </router-link>
      </footer>
    </template>
    <script>
      Vue.component("myhead", {
        template: "<h2>Head - wh2114-daydayup</h2>",
      });
      Vue.component("myfoot", {
        template: "#myfoot",
        data() {
          return {
            flist: [
              { path: "/main/wechat", name: "wechat", icon: "", title: "微信" },
              {
                path: "/main/contact",
                name: "contact",
                icon: "",
                title: "通讯录",
              },
              { path: "/main/find", name: "find", icon: "", title: "朋友圈" },
              { path: "/main/mine", name: "mine", icon: "", title: "我的" },
            ],
          };
        },
      });
      // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  (脚手架)

      // 1. 定义路由组件.
      const Main = {
        template: "#main",
      };
      const Wechat = {
        template: "#wechat",
      };
      const Contact = {
        template: "#contact",
      };
      const Find = {
        template: "#find",
      };
      const Mine = {
        template: "#mine",
      };
      const Notfound = {
        template: "#notfound",
      };
      // 2. 定义一些路由
      // 每个路由都需要映射到一个组件。
      const routes = [
        {
          path: "/",
          redirect: "/main",
        },
        {
          path: "/main",
          name: "main",
          redirect: "/main/wechat",
          component: Main,
          children: [
            // 子路由  对应一个 router-view
            { path: "/main/wechat", name: "wechat", component: Wechat },
            { path: "/main/contact", name: "contact", component: Contact },
            { path: "/main/find", name: "find", component: Find },
            { path: "/main/mine", name: "mine", component: Mine },
          ],
        },
        {
          path: "/404",
          name: "notFound",
          component: Notfound,
        },
        {
          path: "*",
          redirect: "/404",
        },
      ];

      // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
      // # 表示 hash 路由
      const router = new VueRouter({
        routes,
        mode: "hash",
      });

      // 4. 路由挂载到根实例
      const vm = new Vue({
        router, // this.$router
        data: {
          title: "Vue 路由初步 - 微信App嵌套路由",
        },
        components: {},
        watch: {
          $route: function (to, from) {
            console.log(to);
            console.log(from);
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;

          console.log(this.$router); // 路由对象  负责路由跳转 路由导航和路由全局监听
          console.log(this.$route); // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)
        },
      }).$mount("#app");
    </script>
    <!-- 
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view     

        配置简单 路由     

        路由守卫   阻止你进入或者离开当前路由 

        用来判断时候可以进入或者离开当前路由  

        路由导航守卫    分三种   
        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  
     -->
  </body>
</html>
